<script setup>
import {useRoute} from "vue-router";
import {induce} from "@/utils/derive.js";
import {get_dict_tree_list, get_dict_obj} from "@/apis/data/dict/index.js";
import {get_table_field_list} from "@/apis/data/field/index.js";
import {
  create_dictType,
  export_dictType,
  delete_dictType,
  batch_delete_dictType,
  update_dictType,
  get_dictIdType_list,
  get_dictType_list,
  get_dictType_obj,
} from "@/apis/data/dictType/index.js";
import {message} from "ant-design-vue";

const route = useRoute();
const pageData = ref({
  dictFilters: {
    creator: "",
    modifier: "",
    status: true,
    name: "",
    code: "",
  },
  expandedKeys: [],
  selectedKeys: [],
  fieldNames: {children: "children", title: "name"},
  selectDict: {name: "", code: ""},
  dictTreeList: [],

  searchVisible: true,
  createVisible: false,
  updateVisible: false,
  viewVisible: false,
  filters: {
    creator: "",
    modifier: "",
    status: 1,
    name: "",
    value: "",
    page: 1,
    pageSize: 10,
  },
  obj: {
    sort: 1,
    remark: "",
    status: 1,
    name: "",
    value: "",
    dict_id: "",
  },
  rowSelection: [],
  loading: false,
  total: 0,
  customs: [],
  dictTypeList: [],
});
const method = reactive({
  getDictTreeList: () => {
    get_dict_tree_list(pageData.value.dictFilters).then(res => {
      if (res.code === 200) {
        pageData.value.dictTreeList = res.data;
        pageData.value.expandedKeys = [res.data[0].key];
        pageData.value.selectedKeys = [res.data[0].key];
        method.getDictObj(res.data[0].key);
        method.getDictIdList(res.data[0].key);
      } else {
        message.error(res.message);
      }
    });
  },
  getDictObj: (id) => {
    get_dict_obj(id).then(res => {
      if (res.code === 200) {
        pageData.value.selectDict.name = res.data.name;
        pageData.value.selectDict.code = res.data.code;
      } else {
        message.error(res.message);
      }
    });
  },
  select: (e) => {
    pageData.value.expandedKeys = e;
    pageData.value.selectedKeys = e;
    method.getDictObj(e[0]);
    method.getDictIdList(e[0]);
  },
  reset: () => {
    pageData.value.filters = {
      creator: "",
      modifier: "",
      status: 1,
      name: "",
      value: "",
      page: 1,
      pageSize: 10,
    };
    method.getDictTypeList();
  },
  query: () => {
    pageData.value.dictTypeList = [];
    method.getDictTypeList();
  },
  create: (val) => {
    pageData.value.obj = {
      sort: 1,
      remark: "",
      status: true,
      name: "",
      value: "",
      dict_id: pageData.value.selectedKeys[0],
    };
    pageData.value.createVisible = val;
  },
  createOk: () => {
    create_dictType(pageData.value.obj).then(res => {
      if (res.code === 200) {
        message.success(res.message);
        method.getDictIdList(pageData.value.selectedKeys[0]);
        method.closeCreate();
      } else {
        message.error(res.message);
      }
    });
  },
  closeCreate: () => {
    pageData.value.createVisible = false;
  },
  deleteAll: (val) => {
    if (val) {
      method.getDictIdList(pageData.value.selectedKeys[0]);
    }
  },
  derive: () => {
    induce(route.meta.title, pageData.value.customs, pageData.value.dictList);
    message.success("导出成功");
    method.getDictIdList(pageData.value.selectedKeys[0]);
  },
  search: () => {
    pageData.value.searchVisible = !pageData.value.searchVisible;
  },
  refresh: () => {
    pageData.value.dictTypeList = [];
    method.getDictIdList(pageData.value.selectedKeys[0]);
  },
  export: (val) => {
    if (val) {
      method.getDictIdList(pageData.value.selectedKeys[0]);
    }
  },
  getColumnsList: () => {
    const params = {
      name: route.meta.title,
      path: route.path,
    };
    get_table_field_list(params).then(res => {
      if (res.code === 200) {
        pageData.value.customs = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  getDictIdList: (id) => {
    get_dictIdType_list(id).then(res => {
      if (res.code === 200) {
        pageData.value.dictTypeList = res.data.items;
        pageData.value.total = res.data.total;
        pageData.value.loading = false;
      } else {
        message.error(res.message);
      }
    });
  },
  getDictTypeList: () => {
    get_dictType_list(pageData.value.filters).then(res => {
      if (res.code === 200) {
        pageData.value.dictTypeList = res.data.items;
        pageData.value.total = res.data.total;
        pageData.value.loading = false;
      } else {
        message.error(res.message);
      }
    });
  },
  update: (val) => {
    pageData.value.updateVisible = true;
    get_dictType_obj(val.id).then(res => {
      if (res.code === 200) {
        pageData.value.obj = res.data;
        pageData.value.obj.dict_id = res.data.dicts;
      } else {
        message.error(res.message);
      }
    });
  },
  updateOk: () => {
    update_dictType(pageData.value.obj.id, pageData.value.obj).then(res => {
      if (res.code === 200) {
        method.closeUpdate();
        method.getDictIdList(pageData.value.selectedKeys[0]);
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    });
  },
  closeUpdate: () => {
    pageData.value.updateVisible = false;
  },
  delete: () => {
    method.getDictIdList(pageData.value.selectedKeys[0]);
  },
  view: (val) => {
    pageData.value.viewVisible = true;
    get_dictType_obj(val.id).then(res => {
      if (res.code === 200) {
        pageData.value.obj = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  rowSelection: (val) => {
    pageData.value.rowSelection = val;
  },
  changePage: (page) => {
    pageData.value.filters.page = page;
    method.getDictIdList(pageData.value.selectedKeys[0]);
  },
  changeSize: (val) => {
    pageData.value.filters.page = val.current;
    pageData.value.filters.pageSize = val.size;
    method.getDictIdList(pageData.value.selectedKeys[0]);
  },
});
onMounted(() => {
  method.getDictTreeList();
  method.getColumnsList();
});
</script>

<template>
  <div style="display: flex;">
    <div class="dictTree">
      <a-card>
        <a-directory-tree
            v-model:expandedKeys="pageData.expandedKeys"
            v-model:selectedKeys="pageData.selectedKeys"
            :field-names="pageData.fieldNames"
            :tree-data="pageData.dictTreeList"
            @select="method.select"
        />
      </a-card>
    </div>
    <div class="dictType">
      <a-card>
        <Search v-if="pageData.searchVisible">
          <a-form :model="pageData.filters">
            <a-row :gutter="24">
              <a-col :span="5">
                <a-form-item label="字典类型名称">
                  <a-input v-model:value="pageData.filters.name" placeholder="字典类型名称" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="字典类型值">
                  <a-input v-model:value="pageData.filters.value" placeholder="字典类型值" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item label="状态">
                  <a-select v-model:value="pageData.filters.status">
                    <a-select-option :value="1">启用</a-select-option>
                    <a-select-option :value="0">禁用</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item>
                  <a-button style="margin-right: 10px" @click="method.reset">重置</a-button>
                  <a-button type="primary" @click="method.query">查询</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </Search>
        <Operate
            file="字典类型管理导入模板.xlsx"
            :delete-all-list="pageData.rowSelection"
            :delete-all-fun="batch_delete_dictType"
            :export-fun="export_dictType"
            @onHandleCreate="method.create"
            @onHandleDelete="method.deleteAll"
            @onHandleDerive="method.derive"
            @onHandleSearch="method.search"
            @onHandleRefresh="method.refresh"
        ></Operate>
        <Table
            :loading="pageData.loading"
            :scroll="{x:500, y: 550}"
            :columns="pageData.customs"
            :data-list="pageData.dictTypeList"
            :delete="delete_dictType"
            @update="method.update"
            @delete="method.delete"
            @view="method.view"
            @rowSelect="method.rowSelection"
        ></Table>
        <Pagination
            :page="pageData.filters.page"
            :page-size="pageData.filters.pageSize"
            :total="pageData.total"
            @changePage="method.changePage"
            @changeSize="method.changeSize"
        ></Pagination>
      </a-card>
    </div>
  </div>
  <a-modal
      v-model:open="pageData.createVisible"
      title="新增"
      ok-text="保存"
      cancel-text="取消"
      width="600px"
      @close="method.closeCreate"
      @cancel="method.closeCreate"
      @ok="method.createOk"
  >
    <a-divider></a-divider>
    <a-form :model="pageData.obj" :label-col="{ span: 4 }" :wrapper-col="{ span: 17 }">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="类型名称" :colon="false" required>
            <a-input v-model:value="pageData.obj.name" placeholder="字典类型名称" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="字典类型值" :colon="false" required>
            <a-input v-model:value="pageData.obj.value" placeholder="字典类型值" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="所属字典" :colon="false" required>
            <a-tree-select
                style="width: 100%"
                v-model:value="pageData.obj.dict_id"
                placeholder="所属字典"
                :tree-data="pageData.dictTreeList"
                :field-names="{
                  children: 'children',
                  label: 'name',
                  value: 'id',
                }"
                tree-node-filter-prop="name"
                allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="排序" :colon="false">
            <a-input-number v-model:value="pageData.obj.sort" placeholder="排序" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="状态" :colon="false">
            <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
  </a-modal>
  <a-modal
      v-model:open="pageData.updateVisible"
      title="编辑"
      ok-text="保存"
      cancel-text="取消"
      width="600px"
      @close="method.closeUpdate"
      @cancel="method.closeUpdate"
      @ok="method.updateOk"
  >
    <a-divider></a-divider>
    <a-form :model="pageData.obj" :label-col="{ span: 4 }" :wrapper-col="{ span: 17 }">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="类型名称" :colon="false" required>
            <a-input v-model:value="pageData.obj.name" placeholder="字典类型名称" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="字典类型值" :colon="false" required>
            <a-input v-model:value="pageData.obj.value" placeholder="字典类型值" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="所属字典" :colon="false" required>
            <a-tree-select
                style="width: 100%"
                v-model:value="pageData.obj.dict_id"
                placeholder="所属字典"
                :tree-data="pageData.dictTreeList"
                :field-names="{
                  children: 'children',
                  label: 'name',
                  value: 'id',
                }"
                tree-node-filter-prop="name"
                allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="排序" :colon="false">
            <a-input-number v-model:value="pageData.obj.sort" placeholder="排序" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="状态" :colon="false">
            <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
  </a-modal>
  <a-drawer
      v-model:open="pageData.viewVisible"
      title="查看"
      width="800"
  >
    <a-form :model="pageData.obj" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="字典类型名称" :colon="false">
            <a-input v-model:value="pageData.obj.name" placeholder="字典类型名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="字典类型值" :colon="false">
            <a-input v-model:value="pageData.obj.value" placeholder="字典类型值" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="状态" :colon="false">
            <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属字典" :colon="false" required>
            <a-tree-select
                style="width: 100%"
                v-model:value="pageData.obj.dicts"
                placeholder="所属字典"
                :tree-data="pageData.dictTreeList"
                :field-names="{
                  children: 'children',
                  label: 'name',
                  value: 'id',
                }"
                tree-node-filter-prop="name"
                allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建人" :colon="false">
            <a-input v-model:value="pageData.obj.creator" placeholder="创建人" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改人" :colon="false">
            <a-input v-model:value="pageData.obj.modifier" placeholder="修改人" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建时间" :colon="false">
            <a-input v-model:value="pageData.obj.create_time" placeholder="创建时间" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改时间" :colon="false">
            <a-input v-model:value="pageData.obj.update_time" placeholder="修改时间" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>

<style scoped lang="less">
.dictTree {
  width: 18%;
}

.dictType {
  width: 82%;
}
</style>